<template>
<div class="about">
  <!-- 模板中我们不需要.value, 在编译模板会自动.value -->
  <h3>{{count}}</h3>
  <button @click="update">增加1</button>
  <button @click="count = count + 2">增加2</button>
</div>
</template>

<script lang="ts">
  import { defineComponent, ref } from "vue";

  export default defineComponent({
    beforeCreate() {
      console.log('beforeCreate')
    },

    setup () {
      console.log('setup', this) // undefined
      // 产生一个ref响应式数据, 指定数据的初始值
      // 内部的value属性存储数据, 只要更新了value, 组件就会自动更新
      const count = ref<number>(2)  
      console.log(count)

      // 更新数据的函数 => 相关于以前的method
      const update = () => {
        count.value += 1
      }

      // 返回的对象中的属性/方法, 模板可以直接使用
      return {
        count,
        update
      }
    }
  })
</script>
